// 轮播管理子组件 编辑与添加共用弹框
import React, { useEffect } from 'react';
import { Button, Modal, message, Form, Input, Switch, InputNumber } from 'antd';
import '../../../css/AddorRev.css'
import { addTag, revTag } from '../../../../api/opreationApi'
// 表格 接口
interface DataType {
  key: React.Key
  labelId: number
  labelLocation: number
  labelName: string
  labelState: number
}


// 参数接口
interface PropsType {
  modalClose(): void
  isModalOpen: boolean
  head: string | null
  nowRev: DataType | null
  getData(): void
}

export default function AddorRev(props: PropsType) {
  const [form] = Form.useForm();
  // 初始化
  useEffect(() => {
    //去修改form表单里面的默认值
    if (props.head === '添加') {
      form.setFieldsValue({
        labelName: null,
        labelLocation: null,
        labelState: null
      })
    } else {
      form.setFieldsValue({
        labelName: props.nowRev?.labelName,
        labelLocation: props.nowRev?.labelLocation,
        labelState: props.nowRev?.labelState
      })
    }
  }, [props])


  // 对话框部分
  const handleOk = () => {
    props.modalClose()
  };

  const handleCancel = () => {
    props.modalClose()
  };
  // 表单部分
  const onFinish = (values: any) => {
    const data = {
      labelState: values.labelState === true ? 1 : 0,
      labelLocation: values.labelLocation,
      labelName: values.labelName,
    }
    if (props.head === '添加') {
      addTag(data).then(res => {
        props.getData()
      })
    } else {
      revTag({ ...data, labelId: props.nowRev?.labelId }).then(res => {
        props.getData()
      })
    }
    console.log('Success:', values);
    props.modalClose()
    message.success('提交成功！')
  };

  // 开关按钮
  const onChangeSwitch = (checked: boolean) => {
    console.log(`switch to ${checked}`);
  };



  return (
    <>
      <Modal title={props.head} open={props.isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          {/*关键词 */}
          <Form.Item
            label="标签"
            name="labelName"
            rules={[{ required: true, message: '请输入关键词名称！' }]}
            initialValue={props.nowRev?.labelName}
          >
            <Input placeholder="请输入关键词名称！" />
          </Form.Item>
          {/* 位置 */}
          <Form.Item
            label="位置"
            name="labelLocation"
            rules={[{ required: true, message: '请输入位置！' }]}
            initialValue={props.nowRev?.labelLocation}
          >
            <InputNumber placeholder="请输入位置！" />
          </Form.Item>
          {/* 状态 */}
          <Form.Item name='labelState' label="状态" valuePropName='checked' initialValue={props.nowRev?.labelState}>
            <Switch onChange={onChangeSwitch} />
          </Form.Item>
          {/* 操作按钮 */}
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className='opreate'>
            <Button type="primary" htmlType="submit" className='submit'>提交</Button>
            <Button type="primary" onClick={handleCancel} className='cancel'>取消</Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
